<template>
  <basic-container>
    <div class="avue-crud">
      <el-dialog :title="!form.id ? '新增' : '修改'" :modal="false" :visible.sync="visible">
        <el-form ref="dataForm" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="菜单类型" prop="type">
                <el-radio-group v-model="form.type" size="small">
                  <el-radio-button label="1">菜单</el-radio-button>
                  <el-radio-button label="2">按钮</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上级菜单">
                <treeselect
                  v-model="form.parentId"
                  :options="menuOptions"
                  :show-count="true"
                  @input="changeParentId"
                  placeholder="选择上级菜单"
                  :normalizer="normalizer"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="图标" prop="icon" v-if="form.type !== '2'">
            <avue-icon-select v-model="form.icon" :icon-list="iconList"></avue-icon-select>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入菜单名称" />
          </el-form-item>
          <el-form-item label="路由地址" prop="path" v-if="form.type !== '2'">
            <el-input v-model="form.path" placeholder="请输入路由地址" />
          </el-form-item>
          <el-form-item label="组件地址" v-if="form.type !== '2'">
            <el-input v-model="form.component" placeholder="请输入组件地址" />
          </el-form-item>
          <el-form-item label="权限标识" prop="permissionValue" v-if="form.type === '2'">
            <el-input v-model="form.permissionValue" placeholder="请权限标识" maxlength="50" />
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="路由缓冲" prop="isBuffer" v-if="form.type !== '2'">
                <el-radio-group size="small" v-model="form.isBuffer">
                  <el-radio-button label="false">否</el-radio-button>
                  <el-radio-button label="true">是</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数据维护" prop="isMaintenance" v-if="form.type !== '2'">
                <el-radio-group size="small" v-model="form.isMaintenance">
                  <el-radio-button label="false">否</el-radio-button>
                  <el-radio-button label="true">是</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序" prop="sort">
                <el-input-number v-model="form.sort" controls-position="right" :min="0" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="saveMenu">确 定</el-button>
          <el-button @click="visible = false" size="small">取 消</el-button>
        </div>
      </el-dialog>
      <el-form :inline="true">
        <el-form-item>
          <el-button icon="el-icon-plus" type="primary" size="small" @click="btnAdd">添加</el-button>
        </el-form-item>
      </el-form>
      <!--表格-->
      <el-table
        :data="tableData"
        row-key="id"
        size="small"
        border
        :default-expand-all="false"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="name" label="菜单名称" fixed="left" width="200"></el-table-column>
        <el-table-column prop="icon" label="图标" align="center" width="100">
          <template slot-scope="scope">
            <i :class="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column prop="sort" align="center" width="100" label="排序"></el-table-column>
        <el-table-column prop="path" align="center" width="200" label="页面路径"></el-table-column>
        <el-table-column prop="component" align="center" width="200" label="组件路径"></el-table-column>
        <el-table-column prop="type" align="center" width="150" label="类型">
          <template slot-scope="scope">
            <el-tag type="success">{{scope.row.type === 1? '左菜单':'按钮'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isBuffer" align="center" width="100" label="缓冲">
          <template slot-scope="scope">
            <el-tag type="success">{{scope.row.isBuffer ? '是':'否'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isMaintenance" align="center" width="100" label="是否数据维护">
          <template slot-scope="scope">
            <el-tag type="success">{{scope.row.isMaintenance ? '是':'否'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="permissionValue" align="center" width="200" label="权限标识"></el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="250">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-plus" @click="btnAdd(scope.row)" v-show="getPermissions('menu_add')">添加</el-button>
            <el-button type="text" size="small" icon="el-icon-edit" @click="btnUpdate(scope.row)" v-show="getPermissions('menu_get')">修改</el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              size="small"
              @click="btnDelete(scope.row)"
              v-show="getPermissions('menu_delete')"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </basic-container>
</template>

<script>
import { addMenu, getMenu, updateMenu, deleteMenu } from "@/api/permission/menu"
import Treeselect from '@riophae/vue-treeselect'
import iconList from '@/const/iconList'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: { Treeselect },
  name: '',
  data() {
    return {
      iconList: iconList,
      visible: false,
      tableData: [],
      ifBtn: false,
      menuOptions: [],
      form: {
        type: '1',
        icon: '',
        parentId: '0',
        path: '',
        component: '',
        sort: 0,
        isBuffer: 'false',
        isMaintenance: 'false',
        name: '',
        permissionValue: ''
      },
      data: [],
      // 表单校验
      rules: {
        name: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" }
        ],
        sort: [
          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
        ],
        keepAlive: [
          { required: true, message: "路由缓冲不能为空", trigger: "blur" }
        ],
        permissionvalue: [
          { required: true, message: "权限标识不能为空", trigger: "blur" }
        ]
      }
    }
  }, created() {
    this.searchHandler()
  }, methods: {
    getPermissions(value) {
      return this.getPermission(value)
    },
    changeParentId(value) {
      // i dont't that why v-model abnormal but i know it is ok
      this.form.parentId = value
    },
    normalizer(node) {
      if (!node.children) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    btnAdd(row) {
      this.form = {
        type: '1',
        sort: 0,
        isBuffer: 'false',
        isMaintenance: 'false',
        parentId: row.id || '0'
      }
      this.visible = true
    },
    btnDelete(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row);
        deleteMenu([row.id]).then(() => {
        this.$message.success('删除成功')
        this.searchHandler()
      })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    btnUpdate(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.visible = true
    },
    saveMenu() {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        if (this.form.id) {
          updateMenu(this.form).then(() => {
            this.$message.success('修改成功')
            this.searchHandler()
            this.visible = false
          })
        } else {
          addMenu(this.form).then(() => {
            this.$message.success('添加成功')
            this.searchHandler()
            this.visible = false
          })
        }
      })
    },
    searchHandler() {
      getMenu().then(res => {
        this.menuOptions = []
        this.tableData = res.data
        const menu = { id: 0, name: '根菜单', children: [] }
        menu.children = res.data
        this.menuOptions.push(menu)
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
